<template>
  <div
    id="main19"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main19')
      var myChart = this.$echarts.init(chartDom)
      var option
      const bgPatternImg = new Image()
      bgPatternImg.src = require('@/assets/bg-hpic.jpg')
      const chartData = [
        {
          value: 520,
          name: 'A'
        },
        {
          value: 280,
          name: 'B'
        },
        {
          value: 100,
          name: 'C'
        },
        {
          value: 100,
          name: 'D'
        }
      ]
      const colorList = [
        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#CA8CCA'
          },
          {
            offset: 1,
            color: '#EFA5BB'
          }
        ]),
        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#BFA4E4'
          },
          {
            offset: 1,
            color: '#E29CE2'
          }
        ]),
        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#A8AAE5'
          },
          {
            offset: 1,
            color: '#BEA3E3'
          }
        ]),
        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#A4D37D'
          },
          {
            offset: 1,
            color: '#E5F2A7'
          }
        ])
      ]
      const sum = chartData.reduce((per, cur) => per + cur.value, 0)
      const gap = (1 * sum) / 100
      const pieData1 = []
      const pieData2 = []
      const gapData = {
        name: '',
        value: gap,
        itemStyle: {
          color: 'transparent'
        }
      }
      for (let i = 0; i < chartData.length; i++) {
        pieData1.push({
          ...chartData[i],
          itemStyle: {
            borderRadius: 100,
            shadowColor: '#2a2a34',
            shadowBlur: 5,
            shadowOffsetY: 0,
            shadowOffsetX: 0,
            borderColor: '#2a2a34',
            borderWidth: 2
          }
        })
        pieData1.push(gapData)

        pieData2.push({
          ...chartData[i],
          itemStyle: {
            borderRadius: 10,
            color: colorList[i],
            opacity: 0.1,
            shadowColor: '#000',
            shadowBlur: 1,
            shadowOffsetY: 5,
            shadowOffsetX: 0
          }
        })
        pieData2.push(gapData)
      }

      option = {
        backgroundColor: {
          image: bgPatternImg,
          repeat: 'repeat'
        },
        title: [
          {
            text: '75.0%',
            x: '50%',
            y: '43%',
            textAlign: 'center',
            textStyle: {
              fontSize: '40',
              fontWeight: '500',
              color: '#98b5d2',
              textAlign: 'center',
              textShadowColor: '#000',
              textShadowBlur: '1',
              textShadowOffsetX: 2,
              textShadowOffsetY: 2
            }
          },
          {
            text: 'DESIGN ELEMENTS',
            left: '50%',
            top: '55%',
            textAlign: 'center',
            textStyle: {
              fontSize: '14',
              fontWeight: '400',
              color: '#E5F2A7',
              textAlign: 'center',
              textShadowColor: '#000',
              textShadowBlur: '1',
              textShadowOffsetX: 1,
              textShadowOffsetY: 1
            }
          }
        ],
        legend: {
          left: '5%',
          top: '10%',
          align: 'left',
          itemGap: 18,
          itemWidth: 20,
          itemHeight: 20,
          shadowBlur: 10,
          shadowOffsetY: 0,
          shadowOffsetX: 0,
          borderColor: '#2a2a34',
          borderWidth: 2,
          textStyle: {
            color: '#D8DDE3',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                fontSize: 18,
                color: '#D8DDE3'
              },
              percent: {
                padding: [0, 0, 0, 10],
                color: '#D8DDE3',
                fontSize: 18
              }
            }
          },
          formatter: (name) => {
            const item = chartData.find((i) => {
              return i.name === name
            })
            const p = ((item.value / sum) * 100).toFixed(0)
            return '{name|' + name + '}' + '{percent|' + p + '}' + ' %'
          }
        },

        color: colorList,

        series: [
          {
            type: 'pie',
            z: 3,
            roundCap: true,
            radius: ['44%', '51%'],
            center: ['50%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: pieData1
          },
          {
            type: 'pie',
            z: 2,
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            silent: true,
            data: pieData2
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
